<template>
	<!-- 	<page-meta>
		<navigation-bar :title="nbTitle" :subtitle-color="nbFrontColor" :loading="nbLoading" :front-color="nbFrontColor"
			:background-color="nbBackgroundColor" />
	</page-meta> -->
	<view>

		<view class="notice-title">
			{{this.banner.feedbackTitle}}
		</view>
		<view class="auther-time">

			<view>
				<text style="font-size: 20rpx; color: slategray; ">{{this.banner.feedbackTime}}</text>
			</view>
		</view>
		<view class="article-meta">
			<view>
				<mp-html style="text-indent:2em; font-size: 28rpx;" :content="this.banner.feedbackContent" />
			</view>
		</view>

		<view class="banner" v-show="imageList.length!=0">
			<!-- 轮播图 -->
			<swiper class="swiper-box" :circular="true" :autoplay="true" :indicator-dots="true">
				<swiper-item v-for="(item, index) in imageList" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="">
			<view v-if="this.banner.replyStatus>0">
				<view style="margin-top: 50rpx; margin-bottom: 20rpx; color: black; font-size: 40rpx;">
					回复内容：
				</view>
				<view class="article-meta">
					<view style=" margin-left: 15rpx;">
						<mp-html style="text-indent:2em; margin-bottom: 20rpx;" :content="this.banner.replyContent" />
					</view>
				</view>
				<view class="reply-time">

					<view>
						<text style="font-size: 19rpx; color: slategray; ">{{this.banner.replyTime}}</text>
					</view>
				</view>
			</view>

			<view v-if="this.banner.replyStatus==0">
				<view style="margin-top: 100rpx; margin-bottom: 20rpx; font-size: 40rpx;">
					请耐心等待校长回复...
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSelectAdviceById,
	} from '@/api/advice/advice.js'
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		data() {
			return {
				nbTitle: '信息详情',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#fcc10d',
				imageList: [],
				banner: []
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			getSelectAdviceById(item.id).then((res) => {
				this.banner = res.data;
				if (this.banner.feedbackPhoto != null) {
					this.imageList = this.banner.feedbackPhoto.split(',')
				}
			})


			//详情标题
			uni.setNavigationBarTitle({
				title: "信息详情"
			});
		},
		methods: {},
		onShow() {},
		// created() {
		// 	if (this.banner.feedbackPhoto != null) {
		// 		this.imageList = this.banner.feedbackPhoto.split(',')
		// 	}
		// }
	}
</script>
<style>
	page {
		background-color: #fff;
	}

	.swiper {
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 400rpx;
		line-height: 300rpx;
	}

	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.notice-title {
		font-weight: bold;
		font-size: 38rpx;
		margin-bottom: 16rpx;
		display: flex;
		/* 		justify-content: center; */
		margin-top: 35rpx;
		margin-bottom: 35rpx;
	}

	.auther-time {
		display: flex;
		/* justify-content: center; */
		margin-bottom: 15rpx;
	}

	.reply-time {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 15rpx;
	}
</style>
